<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动漫日历</title>

    <script src="https: //cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

    <script src="https: //libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        :root {
            --smooth: all .3s ease-in-out;
            --border: 1px solid #22222201;
            --img: url(https://www.anmosugoi.com/wp-content/uploads/2019/12/tensei-shitara-slime-datta-ken-milim-nava.jpg)
        }

        body {
            background: #0a0a0a
        }

        .grid {
            display: grid;
            width: 800px;
            min-height: 600px;
            grid-template-columns: repeat(6, 1fr);
            gap: 5px;
            margin: auto
        }

        .item {
            box-sizing: border-box;
            background: #141414;
            counter-increment: number;
            display: grid;
            place-items: start end;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 1px solid #222;
            transition: var(--smooth);

            &:first-child::after {
                counter-set: number 1
            }

            &::after {
                content: counter(number);
                color: #fff;
                font-family: Jost, sans-serif;
                font-weight: bold;
                font-size: 2rem;
                display: inline-block
            }
        }

        .item {
            &:nth-child(4) {
                grid-column: 4 / 6;
                background-image: var(--img);
                filter: grayscale(1) blur(1px);
                background-size: 100%;
                background-position-y: 30%;
                transition: var(--smooth)
            }

            &:nth-child(6) {
                grid-row: 2 / 4;
                grid-column: 1 / 3;
                background-image: var(--img);
                filter: grayscale(1) blur(1px);
                background-size: 114%;
                background-position-x: 60%;
                transition: var(--smooth)
            }

            &:nth-child(10) {
                background-image: var(--img);
                filter: grayscale(1) blur(1px);
                background-size: 240%;
                background-position-x: 50%;
                grid-column-start: 6;
                grid-row: 2 / 4;
                transition: var(--smooth)
            }

            &:nth-child(14) {
                grid-row: 4 / 6;
                background-image: var(--img);
                filter: grayscale(1) blur(1px);
                background-size: 240%;
                background-position-x: 50%;
                transition: var(--smooth)
            }

            &:nth-child(17) {
                grid-column: 4 / 6;
                background-image: var(--img);
                filter: grayscale(1) blur(1px);
                background-size: 100%;
                background-position-Y: 30%;
                transition: var(--smooth)
            }

            &:nth-child(28) {
                grid-column: 5 / 7;
                background-image: var(--img);
                filter: grayscale(1) blur(1px);
                background-size: 100%;
                background-position-y: 30%;
                transition: var(--smooth)
            }

            &:hover {
                filter: grayscale(0);
                transition: var(--smooth);
                box-shadow: 0 0 64px 4px #ff999c64
            }
        }
    </style>
</head>

<body>
    <div class="grid">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>